<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟</title>
		<link rel="stylesheet" type="text/css" href="../css/reset-min.css"/>
		<style type="text/css">
			.wrap{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				
				width: 200px;
				height: 200px;
				border: 1px solid;
				border-radius: 50%;
				
				background-color: white;
				box-shadow: 2px 2px 2px #808080;
			}
			ul > li{
				position: absolute;
				left: 99px;
				top: 0;
				width: 2px;
				height: 10px;
				background-color: black;
				transform-origin: center 100px;
			}
			ul > li:nth-child(5n+1){
				height: 15px;
			}
			
			.wrap > .hour{
				position: absolute;
				left: 97px;
				top:70px;
				width: 6px;
				height: 30px;
				background-color: #000000;
				transform-origin: center bottom;
			}
			.wrap > .min{
				position: absolute;
				left: 98px;
				top:50px;
				width: 4px;
				height: 50px;
				background-color: gray;
				transform-origin: center bottom;
			}
			.wrap > .sec{
				position: absolute;
				left: 99px;
				top:30px;
				width: 2px;
				height: 70px;
				background-color: red;
				transform-origin: center bottom;
			}
			/* 中心 */
			.wrap > .icon{
				position: absolute;
				left: 90px;
				top:90px;
				width: 20px;
				height: 20px;
				background-color: beige;
				border-radius: 50%;
			}
			
		</style>
	</head>
	<body>
		<!-- 表盘 -->
		<div class="wrap">
			<!-- 刻度 -->
			<ul></ul>
			<!-- 时针 -->
			<div class="hour"></div>
			<div class="min"></div>
			<div class="sec"></div>
			<div class="icon"></div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			var ulNode = document.querySelector(".wrap > ul");
			var hourNode = document.querySelector(".wrap > .hour");
			var minNode = document.querySelector(".wrap > .min");
			var secNode = document.querySelector(".wrap > .sec");
			var styleNode = document.createElement("style");//手动创建一个style标签
			var liHtml = "";
			var cssText = "";
			
			for (var i = 0; i < 60; i++) {
				liHtml+="<li></li>";//手动添加li标签
				//手动拼接li标签的css样式,每个li旋转的角度不同
				cssText+="ul > li:nth-child("+(i+1)+"){transform: rotate("+i*6+"deg);}";
			}
			ulNode.innerHTML = liHtml;
			styleNode.innerHTML = cssText;
			//将创建的style插入到head中
			document.head.appendChild(styleNode);
			
			move();//先走一次，把位置定好，再走定时器
			// 表针转动
			setInterval(move,1000);//1秒调用一次
			function move(){
				var date = new Date();
				var s = date.getSeconds();
				var m = date.getMinutes()+s/60;
				var h = date.getHours()+m/60;
				// 时针一秒0.5度
				hourNode.style.transform = "rotate("+(30*h)+"deg)";
				minNode.style.transform = "rotate("+(6*m)+"deg)";
				secNode.style.transform = "rotate("+(6*s)+"deg)";
			}
		}
	</script>
</html>
